<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	request.setAttribute("basePath", request.getContextPath());
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>${detailsInfo.PRO_MC}--中农商城</title>
<script type="text/javascript" src="${basePath }/framework/jquery/jquery.js"></script>
<script type="text/javascript" src="${basePath }/framework/echarts/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
       var basePath = '${basePath}';
        var myChart = echarts.init(document.getElementById('main'));
        myChart.showLoading();
        $.get(basePath + '/tjbb/queryTjbbDayReport.do', function (data) {
        	data=data.data;
            myChart.hideLoading();
            var base = -data.reduce(function (min, val) {
                return Math.floor(Math.min(min, val.l));
            }, Infinity);
            myChart.setOption(option = {
                title: {
                    text: '日报表统计',
                    subtext: '最多查看一月数据（默认7天）',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        animation: false,
                        label: {
                            backgroundColor: '#ccc',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            textStyle: {
                                color: '#222'
                            }
                        }
                    },
                    formatter: function (params) {
                        return params[2].name + '<br />' + params[2].value;
                    }
                },
                grid: {
                	 top: '12%',
     	            left: '1%',
     	            right: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(function (item) {
                        return item.date;
                    }),
                    axisLabel: {
                        formatter: function (value, idx) {
                            var date = new Date(value);
                            return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false
                },
                yAxis: {
                    axisLabel: {
                        formatter: function (val) {
                            return (val - base)+ '元';
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return (params.value - base).toFixed(1) + '元';
                            }
                        }
                    },
                    splitNumber: 3,
                    splitLine: {
                        show: false
                    }
                },
                dataZoom: [
           	            {
           	                show: true,
           	                start: 93,
           	                end: 100
           	            },
           	            {
           	                type: 'inside',
           	                start: 94,
           	                end: 100
           	            },
           	            {
           	                show: true,
           	                yAxisIndex: 0,
           	                filterMode: 'empty',
           	                width: 30,
           	                height: '80%',
           	                showDataShadow: false,
           	                left: '93%'
           	            }
           	        ],
                series: [{
                    name: 'L',
                    type: 'line',
                    data: data.map(function (item) {
                        return item.l + base;
                    }),
                    lineStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    name: 'U',
                    type: 'line',
                    data: data.map(function (item) {
                        return item.u - item.l;
                    }),
                    lineStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#ccc'
                        }
                    },
                    stack: 'confidence-band',
                    symbol: 'none'
                }, {
                    type: 'line',
                    data: data.map(function (item) {
                        return item.value + base;
                    }),
                    hoverAnimation: false,
                    symbolSize: 6,
                    itemStyle: {
                        normal: {
                            color: '#c23531'
                        }
                    },
                    showSymbol: false
                }]
            });
        });
    </script>
</body>
</html>